<template>
	<view class="upload-page">
		<view class="upload-box">
			<u-empty class="empty-box" text=" " mode="news" icon-size="300" font-size="50"></u-empty>
			<view class="btn-box">
				<u-button class="upload-btn" type="primary" @click="uploadFile">上传文件</u-button>
			</view>
			<view class="tips-box">
				提示：请上传格式为.xlsx/.xls的文件，文件内容请按照指定格式填写，否则可能会导致数据更新失败。
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'http://www.example.com', // 演示地址
				showUploadList: false, 
				// 如果将某个ref的组件实例赋值给data中的变量，在小程序中会因为循环引用而报错
				// 这里直接获取内部的lists变量即可
				lists: []
			}
		},
		methods: {
			uploadFile() {
				let baseUrl = this.$baseUrl
				uni.chooseFile({
				  count: 1, //默认100
				  extension:['.xlsx','.xls'],
					success: function (res) {
						uni.showLoading({
							title: '上传中'
						})
						console.log(JSON.stringify(res.tempFilePaths));
						const tempFilePaths = res.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: baseUrl + '/fruit/importFruitList', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data);
								uni.showToast({
									icon: 'none',
									title: res.msg || '上传成功'
								})
							},
							fail: (err) => {
								console.log("上传失败", err)
								uni.showToast({
									icon: 'none',
									title: '上传失败'
								})
							},
							complete: () => uni.hideLoading()
						})
					}
				});
			}
		},
		// 只有onReady生命周期才能调用refs操作组件
		onReady() {
			// 得到整个组件对象，内部图片列表变量为"lists"
		}
	}
</script>

<style lang="scss" scoped>
	.upload-page{
		display: flex;
		justify-content: center;
		width: 100%;
		height: 100vh;
		padding: 40rpx;
		.upload-box{
			padding-top: 5vh;
			.empty-box{
				width: 100%;
				height: 20vh;
			}
			.tips-box{
				margin-top: 20px;
			}
			.btn-box{
				display: flex;
				align-items: center;
				justify-content: center;
				.upload-btn{
					margin-top: 20px;
					border-radius: 20px;
					width: 50%;
					background: #FD8A00;
				}
			}
		}
		
	}
</style>